<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle"> 用户列表</span>
          </div>
          <div class="header-right-wraper">
            <div class="search-wrapper">
              <CInput
                maxlength="30"
                placeholder="按用户名称搜索..."
                v-model="userName"
                class="input-search-style"
                @keyup.enter="enterfactionSearchUser"
              />
              <!-- 搜索 -->
              <!-- <img
                class="iconstylesearch"
                src="@/assets/icons/search.png"
                v-if="showimgsearchicon"
                @click="searchUser"
                alt
              /> -->
              <!-- 清除 -->
              <!-- <img
                class="iconstyleoff"
                src="@/assets/icons/clear.png"
                v-if="showimgofficon"
                @click="clearmess"
                alt
              /> -->
              <CButton
                @click="searchUser"
                color="info"
                class="header-search system-btn-style"
              >
                <!-- <CIcon
                  name="cil-magnifying-glass"
                  style="height: 14px; width: 14px"
                />&nbsp;&nbsp; -->
                搜索
              </CButton>
            </div>
            <CButton
              color="info"
              @click="addUser"
              data-permission="Btn_User_Add"
              class="header-main-btn system-btn-style"
            >
              <CIcon name="cil-plus" />&nbsp;用户
            </CButton>
          </div>
        </CCardHeader>

        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList
              ref="table"
              :dataList.sync="dataList"
              :getColumn="getColumns"
              :getAxios="getAxios"
            >
              <template v-slot:isLock="item">
                <img :src="getBadge(item.data.row.isLock)" />
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="详情"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="getInfo(item.data.row)"
                >
                  详情
                </CButton>
                <CButton
                  title="分配"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="role(item.data.row.id)"
                  data-permission="Btn_User_Allot"
                >
                  分配
                </CButton>
                <CButton
                  title="禁用"
                  v-if="item.data.row.isLock == 0"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="lockUser(item.data.row.id)"
                  data-permission="Btn_User_Ban"
                >
                  禁用
                </CButton>
                <CButton
                  id="jiejin"
                  title="解除"
                  v-if="item.data.row.isLock == 1"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="unLock(item.data.row.id)"
                  data-permission="Btn_User_Remove"
                >
                  解除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>

        <!--<CCardBody>
          <div class="user borderStyle">
            <CDataTable
              :items="data"
              :key="data"
              :fields="fields"
              hover
              border
              class="userMangeTable"
            >
              <template #isLock="{ item }">
                <td align="center">
                  <img :src="getBadge(item.isLock)" />
                </td>
              </template>
              <template #show_details="{ item }">
                <td class="py-2" align="center">
                  &lt;!&ndash; <CButton
                    v-c-tooltip="'详情'"
                    title="详情"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="getInfo(item)"
                  >
                    <CIcon class="colortempstyle" name="cil-line-spacing" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'分配'"
                    title="分配"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="role(item.id)"
                    data-permission="Btn_User_Allot"
                  >
                    <CIcon class="colortempstyle" name="cil-fork" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'禁用'"
                    title="禁用"
                    v-if="item.isLock == 0"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="lockUser(item.id)"
                    data-permission="Btn_User_Ban"
                  >
                    <CIcon class="colortempstyle" name="cil-ban" />
                  </CButton>
                  <CButton
                    id="jiejin"
                    v-c-tooltip="'解除'"
                    title="解除"
                    v-if="item.isLock == 1"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="unLock(item.id)"
                    data-permission="Btn_User_Remove"
                  >
                    <CIcon class="colortempstyle" name="cil-link-broken" />
                  </CButton> &ndash;&gt;
                  <CButton
                    title="详情"
                    variant="outline"
                    class="textBtnStyle"
                    @click="getInfo(item)"
                  >
                  详情
                  </CButton>
                  <CButton
                    title="分配"
                    variant="outline"
                    class="textBtnStyle"
                    @click="role(item.id)"
                    data-permission="Btn_User_Allot"
                  >
                  分配
                  </CButton>
                  <CButton
                    title="禁用"
                    v-if="item.isLock == 0"
                    variant="outline"
                    class="textBtnStyle"
                    @click="lockUser(item.id)"
                    data-permission="Btn_User_Ban"
                  >
                  禁用
                  </CButton>
                  <CButton
                    id="jiejin"
                    title="解除"
                    v-if="item.isLock == 1"
                    variant="outline"
                    class="textBtnStyle"
                    @click="unLock(item.id)"
                    data-permission="Btn_User_Remove"
                  >
                  解除
                  </CButton>
                </td>
              </template>
            </CDataTable>
          </div>
        </CCardBody>
        <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage">
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->
      </CCard>
    </div>
    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="用户信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CSelect
              label="部门"
              horizontal
              :options="orgList"
              :value.sync="userData.organizationId"
              class="selectSuffix"
              readonly
            ></CSelect>
            <CInput label="用户id" horizontal :value="item.id" readonly />
            <CInput
              label="用户名称"
              horizontal
              :value="item.username"
              readonly
            />
            <CInput
              label="昵称"
              horizontal
              :value="item.nickname"
              readonly
            ></CInput>
            <CInput
              label="登录失败次数"
              horizontal
              :value="item.loginFailureCount"
              readonly
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="lockShow"
      draggable
      scrollable
      title="用户禁用"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户禁用</p>
      <div class="modalBody">
        <p>您正在禁用该用户</p>
        <p>请确认是否禁用?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="lockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="lockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="unLockShow"
      draggable
      scrollable
      title="用户解禁"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户解禁</p>
      <div class="modalBody">
        <p>您正在解禁该用户</p>
        <p>请确认是否解禁?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="unLockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="unLockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      :styles="modalStyle"
      title="添加用户信息"
    >
      <p slot="header" class="modalHeader">添加用户信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CSelect
              label="组织机构"
              horizontal
              :options="enterList"
              :value.sync="enterId"
              class="selectSuffix"
              placeholder="请选择组织机构"
            ></CSelect>
            <CSelect
              label="部门"
              horizontal
              :options="orgList"
              :value.sync="orgId"
              class="selectSuffix"
              placeholder="请选择部门"
              @click="selectDepartment"
            ></CSelect>

            <p class="ipTestStyle" id="selectDepartment"></p>
            <CInput
              label="用户名"
              placeholder="请输入用户名"
              horizontal
              v-model="userData.username"
            />
            <CInput
              label="用户昵称"
              placeholder="请输入用户昵称"
              horizontal
              v-model="userData.nickname"
            />
            <CInput
              label="密码"
              placeholder="请输入密码"
              horizontal
              v-model="userData.pwd"
              type="password"
            />
            <CInput
              label="手机号"
              placeholder="请输入手机号(可不填)"
              horizontal
              v-model="userData.mobile"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal v-model="bindShow" draggable scrollable title="角色分配">
      <p slot="header" class="modalHeader">角色分配</p>
      <Table
        border
        stripe
        ref="selection"
        :columns="getColumn1"
        :data="data1"
      ></Table>
      <template #footer class="footerBtns">
        <CButton @click="saveRoleCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="saveRole" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户昵称",
    key: "nickname",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户名",
    key: "username",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "失败次数",
    key: "loginFailureCount",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户状态",
    key: "isLock",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";
import TheSidebarVue from "../../containers/TheSidebar.vue";

export default {
  name: "userManage",
  components: { TableList },
  data() {
    return {
      userName: "",
      showimgofficon: false,
      showimgsearchicon: true,
      dataList: [],
      modalStyle: { top: "250px" },
      unLockShow: false,
      bindShow: false,
      selectShow: false,
      getShow: false,
      roleShow: false,
      addShow: false,
      lockShow: false,
      loading: true,
      data: [],
      item: {},
      clickId: -1,
      total: 0,
      currentPage: 1,
      proCPage: 1,
      proTotal: 0,
      data1: [],
      fields,
      typeList: [],
      userData: {
        applicationId: systemId,
        avatarPath: "",
        file: {},
        mobile: "",
        nickname: "",
        organizationId: 0,
        note: "",
        pwd: "",
        sex: 0,
        userCode: "",
        username: "",
      },
      pageSize: 25,
      allNum: 0,
      enterData: [],
      enterList: [],
      enterId: "",
      orgList: [],
      // {label: "请先选择组织机构！",value: 0}
      orgId: "",
      getColumns: [
        {
          title: "用户昵称",
          key: "nickname",
        },
        {
          title: "用户名",
          key: "username",
        },
        {
          title: "失败次数",
          key: "loginFailureCount",
          width: 120,
          className: "centerText",
        },
        {
          title: "用户状态",
          key: "isLock",
          slot: "isLock",
          width: 120,
          className: "centerText",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          width: 220,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.queryAllUser, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },

  computed: {
    getColumn1() {
      return [
        { type: "selection", width: 60, align: "center" },
        { key: "id", title: "角色id", align: "center" },
        { key: "name", title: "角色名称", align: "center" },
      ];
    },
  },
  mounted() {
    /*this.getUserList();*/
    this.getAll();
  },
  methods: {
    enterfactionSearchUser() {
      this.searchUser();
    },
    // 搜索框的清除按钮，清除输入的内容
    clearmess() {
      this.userName = "";
      this.searchUser();
    },
    searchUser() {
      let path = this.$api.manageApi.queryAllUser;
      let param = {
        userName: this.userName.trim(),
        pageSize: this.pageSize,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },

    selectDepartment() {
      if (this.enterId != "") {
        selectDepartment.innerHTML = "";
      } else {
        let selectDepartment = document.getElementById("selectDepartment");
        selectDepartment.innerHTML = "请先选择组织机构！";
        selectDepartment.style.color = "red";
      }
    },
    // getVendorId(event) {
    //   let tempdata = event.target.value; //获取option对应的value值
    //   this.pageSize = parseInt(tempdata);
    //   this.getMetaDataList();
    // },
    getBadge(isLock) {
      switch (isLock) {
        case 0:
          return endIcon;
        case 1:
          return failedIcon;
      }
    },
    getInfo(val) {
      this.getShow = true;
      this.clickId = val.id;
      this.item = val;
    },
    role(id) {
      this.bindShow = true;
      this.clickId = id;
      let self = this;
      let path = this.$api.manageApi.getUsersRole;
      let param = {
        userId: this.clickId,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.data1 = res.data.data.roleList;
          for (let i = 0; i < self.data1.length; i++) {
            let id = self.data1[i].id;
            if (res.data.data.selectList.indexOf(id) != -1) {
              self.data1[i]._checked = true;
            }
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    addUser() {
      this.addShow = true;
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.createUser;
      let param = self.userData;
      if (this.orgId != "") {
        selectDepartment.innerHTML = "";
      } else {
        let selectDepartment = document.getElementById("selectDepartment");
        selectDepartment.innerHTML = "请先选择部门";
        selectDepartment.style.color = "red";
        return;
      }
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.addShow = false;
          this.enterId = "";
          this.userData = {
            applicationId: systemId,
            avatarPath: "",
            file: {},
            mobile: "",
            nickname: "",
            organizationId: 0,
            note: "",
            pwd: "",
            sex: 0,
            userCode: "",
            username: "",
          };
          this.getUserList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    unLock(id) {
      this.unLockShow = true;
      this.clickId = id;
    },
    unLockCancel() {
      this.unLockShow = false;
    },
    unLockOk() {
      let self = this;
      let path = self.$api.manageApi.ban + "/" + self.clickId;
      let param = {
        type: 0,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.unLockShow = false;
          self.$Message.success(res.data.message);
          self.getUserList();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    lockOk() {
      let tableData = this.data;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].id === this.clickId) {
          tableData[i].isLock = 0;
        }
      }

      let self = this;
      let path = this.$api.manageApi.ban + "/" + this.clickId;
      let param = {
        type: 1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.lockShow = false;

          this.$Message.success(res.data.message);
          self.getUserList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    lockCancel() {
      this.lockShow = false;
    },
    addCancel() {
      this.addShow = false;
    },
    product(id) {
      this.permissionShow = true;
      this.clickId = id;
    },
    getOk() {
      this.getShow = false;
    },
    lockUser(id) {
      this.lockShow = true;
      this.clickId = id;
    },
    saveRoleCancel() {
      this.bindShow = false;
    },
    getCancel() {
      this.getShow = false;
    },
    saveRole() {
      this.bindShow = false;
      let path = this.$api.manageApi.createUserRole;
      let roleIdList = [];
      for (let i = 0; i < this.$refs.selection.getSelection().length; i++) {
        roleIdList.push(this.$refs.selection.getSelection()[i].id);
      }
      let param = {
        userId: this.clickId,
        roleIdList: roleIdList,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.roleShow = false;
          this.$Message.success(res.data.message);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    roleCancel() {
      this.roleShow = false;
    },
    perCancel() {
      this.permissionShow = false;
    },
    getUserList() {
      let self = this;
      let path = this.$api.manageApi.queryAllUser;
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };

      let getAxiosData = { method: "get", url: path };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      
      // this.http.get(path, param).then((res) => {
      //   self.allNum = res.data.data.total;
      //   if (res.data.success) {
      //     self.total = Math.ceil(res.data.data.total / self.pageSize);
      //     self.data = res.data.data.userList;
      //     for (let i = 0; i < self.data.length; i++) {
      //       self.data[i].number =
      //         (self.currentPage - 1) * self.pageSize + i + 1;
      //       if (self.data[i].login_count == undefined) {
      //         self.data[i].login_count = "";
      //       }
      //     }
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
    },
    getOrg() {
      let self = this;
      let path = this.$api.manageApi.getTree;
      let param = {
        enterId: self.enterId,
        isTree: false,
      };
      this.http.get(path, param).then((res) => {
        self.loading = false;
        if (res.data.code == 0) {
          for (let i = 0; i < res.data.data.length; i++) {
            let param = {
              label: res.data.data[i].name,
              value: res.data.data[i].id,
            };
            self.orgList.push(param);
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getAll() {
      let self = this;
      let path = this.$api.manageApi.enterprise;
      let getAxiosData = {
        url: path,
      };
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.enterData = res.data.data.dataList;
          for (let i = 0; i < self.enterData.length; i++) {
            let param = {
              label: self.enterData[i].name,
              value: self.enterData[i].id,
            };
            self.enterList.push(param);
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
  },
  watch: {
    // dataList(newVal, oldVal) {
    //   this.$nextTick(function () {
    //     this.GlobalPermissionRender.render();
    //   });
    // },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getUserList();
    },
    proCPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getUserList();
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getUserList();
    },
    enterId(newVal, oldVal) {
      this.enterId = newVal;
      this.getOrg();
    },
    orgId(newVal, oldVal) {
      this.orgId = newVal;
      this.userData.organizationId = newVal;
    },
    userName(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.error("用户名不得超过30个字符");
      }
      if (newVal == "") {
        this.showimgsearchicon = true;
        this.showimgofficon = false;
      } else {
        this.showimgsearchicon = false;
        this.showimgofficon = true;
      }
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (min-width: 1367px) {
}

.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.userTitle {
  margin-bottom: 0 !important;
}

.page-link:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}
.userMangeTable {
  height: 100%;
  overflow-y: auto;
}
.user {
  height: calc(100% - 52px);
  overflow-y: auto;
}
.ipTestStyle {
  font-size: 8px;
  width: 250px;
  height: 2px;
  margin-top: -6px;
  margin-bottom: 16px;
  margin-left: 120px;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}
</style>
